<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box1 {
            position: relative;
            text-align: center;
            width: 400px;
            height: 40px;
            border: 1px solid red;
            margin: 10px auto;
            line-height: 40px;
            vertical-align: middle;
            position: relative;

        }
        .box2 {
            text-align: center;
            margin: 10px auto;
            width: 400px;
            height: 40px;
            border: 1px solid red;
            line-height: 40px;
            vertical-align: middle;
            text-align: center;
        }
        .box {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            padding-top: 30px;
            border: 2px solid black;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            /* 水平平均分布  */
            align-items: center;
        }
        .boxs {
            width: 50px;
            height: 50px;
            padding: 10px;
            border: 1px solid pink;
        }

        .box1 button {
            /* float: left; */
            width: 100px;
            height: 40px;
            border: 1px solid black;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box1">
        <p></p>
        <button>刷新</button>
    </div>
    <div class="box2"></div>
    <div class="box">
    </div>
    <script>
        var box1 = document.querySelector('.box1');
        // box1.innerHTML = ``
        var box2 = document.querySelector('.box2');
        // box2.innerHTML = ''
        var box = document.querySelector('.box');
        for (let i = 0; i < 36; i++) {
            box.innerHTML += `<div class="boxs"></div>`
        }
        let arr = ['国色天香', '八仙过海', '精忠报国', '倾国倾城', '水木年华', '厚德载物', '金枝玉叶', '随遇而安', '窈窕淑女'];
        let str = '';
        str += arr.join('');
        let boxsArr = str.split('');
        // console.log(boxsArr);
        var boxsArr2 = boxsArr.slice();
        console.log(boxRandom);
        // boxsArr[index];
        var boxs = document.querySelectorAll('.boxs');

        for (let i = 0; i < 36; i++) {
            // 获得随机出现的字的索引
            var index = Math.floor(Math.random() * boxsArr2.length);
            // boxsArr2.splice(index, 1 );
            // 根据索引值从数组里得到这个字取出来
            var boxRandom = boxsArr2.splice(index, 1);
            // 按顺序放进小盒子里
            boxs[i].innerText = boxRandom[0];
            // console.log(boxRandom[0]);            
        }
        // 获得随机一个成语的索引值
        var index4 = Math.floor(Math.random() * arr.length);
        var box1ran = arr[index4];
        box1.querySelector('p').innerHTML += box1ran;
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            location.reload()
        })
        for (let i = 0; i < boxs.length; i++) {
            boxs[i].addEventListener('click', function (e) {
                // console.log(e.path[0].innerHTML);
                // 在事件里找到所点击的box里的这个字，放到box2里面
                // 找这个字：1、console.log(e);2、path[0] 3、e.path[0].innerHTML
                box2.innerText += e.path[0].innerHTML;
                if (box2.innerText.length == 4) {
                    console.log(document.querySelector('.box1>p').innerText);
                    console.log(box2.innerText);
                    if (document.querySelector('.box1>p').innerText == box2.innerText) {
                        alert('选对了!你真棒！！！');
                        location.reload();
                    } else {
                        alert('选错了!再来一次吧！');
                        location.reload();
                    }
                }
                // console.log(box2.innerText.length);

            })
        }
    </script>
</body>

</html>